<template>
  <div class="personal_page">
    <!-- 头像 -->
    <div class="per_info">
      <div class="touxiang">
        <img src="../../assets/images/my/touxiang_03.gif" alt="" />
      </div>
      <div class="phone">157****0147</div>
      <div class="set">
        <router-link to="/set">
          <span class="iconfont">&#xe8b7;</span>
        </router-link>
      </div>
    </div>
    <!-- 收藏 -->
    <div class="collection-column">
      <div class="collection-item">
        <div class="num">0</div>
        <div class="text">收藏</div>
      </div>
      <div class="collection-item">
        <div class="num">0</div>
        <div class="text">我的咨询</div>
      </div>
      <div class="collection-item">
        <div class="num">0</div>
        <div class="text">浏览历史</div>
      </div>
    </div>
    <div class="quanyi">
      <img src="../../assets/images/my/quanyi_06.gif" alt="" />
    </div>
    <!-- 我买的车 -->
    <div class="my-buy-car-box">
      <div class="my-buy-car">我买的车</div>
      <div class="see-all">
        查看更多
        <span class="iconfont">&#xe682;</span>
      </div>
    </div>
    <!-- 我的问答 -->
    <div class="my-buy-car-box">
      <div class="my-buy-car">我的问答</div>
      <div class="see-all">
        查看更多
        <span class="iconfont">&#xe682;</span>
      </div>
    </div>
    <!-- 九宫格 -->
    <div class="jiugongge">
      <div class="jiugongge-item">
        <img src="../../assets/images/my/icon_26.gif" alt="" />
        <div class="text">报价单</div>
      </div>
      <div class="jiugongge-item">
        <img src="../../assets/images/my/icon_10.gif" alt="" />
        <div class="text">优惠券</div>
      </div>
      <div class="jiugongge-item">
        <img src="../../assets/images/my/icon_12.gif" alt="" />
        <div class="text">售后客服</div>
      </div>
      <div class="jiugongge-item">
        <img src="../../assets/images/my/icon_14.gif" alt="" />
        <div class="text">我卖的车</div>
      </div>
      <div class="jiugongge-item">
        <img src="../../assets/images/my/icon_16.gif" alt="" />
        <div class="text">优信养车</div>
      </div>
      <div class="jiugongge-item">
        <img src="../../assets/images/my/icon_22.gif" alt="" />
        <div class="text">常用工具</div>
      </div>
      <div class="jiugongge-item">
        <img src="../../assets/images/my/icon_23.gif" alt="" />
        <div class="text">帮助中信</div>
      </div>
      <div class="jiugongge-item">
        <img src="../../assets/images/my/icon_25.gif" alt="" />
        <div class="text">意见反馈</div>
      </div>
    </div>
    <!-- banner -->
    <div class="banner">
      <img src="../../assets/images/my/banner_32.gif" alt="" />
    </div>
    <!-- list -->
    <div class="list">
      <div class="list-like">
        <div class="con">
          <img src="../../assets/images/my/like_03.gif" alt="" />
          <div>猜你喜欢</div>
          <img src="../../assets/images/my/like_05.gif" alt="" />
        </div>
      </div>
      <div class="list-content">
        <div class="content-item">
          <img src="../../assets/images/my/content-car_08.gif" alt="" />
          <div class="title">
            <span>优信自营</span>
            凯迪拉克 CT42020款 2.0T 自动...
          </div>
          <div class="year-kilometre">
            <span>2020年</span> /
            <span>3.0万公里</span>
          </div>
          <div class="wuliyou">7天无理由退车</div>
          <div class="price">
            <span> 18,65万 </span>
            <span>首付3.73万</span>
          </div>
        </div>
        <div class="content-item">
          <img src="../../assets/images/my/content-car_08.gif" alt="" />
          <div class="title">
            <span>优信自营</span>
            凯迪拉克 CT42020款 2.0T 自动...
          </div>
          <div class="year-kilometre">
            <span>2020年</span> /
            <span>3.0万公里</span>
          </div>
          <div class="wuliyou">7天无理由退车</div>
          <div class="price">
            <span> 18,65万 </span>
            <span>首付3.73万</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ersonal_page",
};
</script>
<style lang="less" scoped>
.personal_page {
  width: 750px;
  background: #f9f9f9;
  box-sizing: border-box;
  padding-top: 54px;
  //   头像
  .per_info {
    width: 100%;
    height: 113px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    .touxiang {
      width: 113px;
      height: 100%;
      img {
        width: 100%;
      }
    }
    .phone {
      height: 100%;
      line-height: 113px;
      padding-left: 26px;
      font-size: 27px;
      flex: 1;
    }
    .set {
      line-height: 113px;
      .iconfont {
        font-size: 38px;
        color: #181818;
      }
    }
  }
  //   收藏
  .collection-column {
    width: 702px;
    height: 155px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    margin: auto;
    text-align: center;
    .collection-item {
      width: 20%;
      padding-top: 48px;
      .num {
        font-size: 33px;
        color: #030303;
        font-weight: 700;
      }
      .text {
        font-size: 23px;
        color: #777;
        padding-top: 16px;
      }
    }
  }
  //   个人权益
  .quanyi {
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
    margin-bottom: 26px;
    img {
      width: 100%;
    }
  }
  //我买的车
  .my-buy-car-box {
    width: 702px;
    height: 110px;
    background: #fff;
    display: flex;
    padding-right: 34px;
    align-items: center;
    box-sizing: border-box;
    margin: auto;
    padding-left: 27px;
    justify-content: space-between;
    margin-bottom: 23px;
    box-shadow: 2px 2px 10px 2px rgba(190, 190, 190, 0.1);
    .my-buy-car {
      font-size: 25px;
      color: #131313;
    }
    .see-all {
      font-size: 22px;
      color: #8c8c8c;
      .iconfont {
        font-size: 20px;
        color: #6e6e6e;
      }
    }
  }
  //   九宫格
  .jiugongge {
    width: 702px;
    height: 368px;
    box-sizing: border-box;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    background: #fff;
    box-shadow: 2px 2px 10px 2px rgba(190, 190, 190, 0.1);
    .jiugongge-item {
      width: 25%;
      text-align: center;
      img {
        width: 46px;
      }
      .text {
        font-size: 25px;
      }
    }
  }
  //   banner
  .banner {
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
    padding-top: 27px;
    img {
      width: 100%;
    }
  }
  //   列表
  .list {
    width: 100%;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    background: #fff;
    .list-like {
      width: 100%;
      height: 113px;
      .con {
        width: 366px;
        margin: auto;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
          height: 100%;
        }
        > div {
          line-height: 133px;
          font-size: 30px;
        }
      }
    }
    .list-content {
      width: 100%;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .content-item {
        width: 48%;
        padding-bottom: 50px;
        > img {
          height: 227px;
        }
        .title {
          width: 100%;
          line-height: 1.5;

          > span {
            display: inline-block;
            width: 97px;
            height: 32px;
            font-size: 12px;
            color: #824304;
            background: #fdcc74;
            text-align: center;
            line-height: 32px;
            border-radius: 8px;
          }
          font-size: 30px;
        }
        .year-kilometre {
          span {
            font-size: 20px;
            color: #8f8f8f;
          }
          line-height: 1.5;
        }
        .wuliyou {
          width: 164px;
          height: 26px;
          background: #e1f0ff;
          color: #7ba2e2;
          font-size: 20px;
          text-align: center;
          line-height: 26px;
        }
        .price {
          line-height: 1.5;
          > span:first-of-type {
            font-size: 26px;
            color: #f34400;
          }
          > span:last-of-type {
            font-size: 23px;
            color: #d54c01;
          }
        }
      }
    }
  }
}
</style>